
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Off Canvas Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="offcanvas.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body style="padding-top: 70px">
    <!--导航条-->
    <nav class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Liittle Store</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#about">商品列表</a></li>
            <li><a href="#contact">账号中心<span class="badge">94</span></a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">
        <!--巨幕-->
        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron">
            <h1>喜迎双十一</h1>
            <p>全场商品五折起！送红包、优惠券！</p>
          </div>
          <h3><span class="glyphicon glyphicon-fire" aria-hidden="true"></span> 品牌热卖</h3>
          <!--热卖栏-->
          <div class="row">
            <div class="col-xs-6 col-lg-4">
              <h2>DAZZLE</h2>
              <a>冬装新款印花图案长袖针织衫毛衣女士上衣打底 </a><br/><br/>
              <p><a class="btn btn-default" href="#" role="button">查看更多 &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>MOUSSY</h2>
              <a>秋季新品 立领蕾丝收腰上衣 女</a><br/><br/>
              <a>秋季新品 迪士尼合作款连帽开衫 女</a><br/><br/>
              <p><a class="btn btn-default" href="#" role="button">查看更多 &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>STELLA LUNA</h2>
              <a>2018冬新款圆头平底欧美机车靴短筒靴子女短靴马丁</a><br/><br/>
              <a>2018秋冬新款尖头时尚香烟跟细跟短筒靴子女欧美短</a><br/><br/>
              <p><a class="btn btn-default" href="#" role="button">查看更多 &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>华为</h2>
              <a>华为 Mate 20 麒麟980AI智能芯片全面屏</a><br/><br/>
              <a>华为(HUAWEI) nova 3 （亮黑色）6GB+128GB 全网通版 移动联通电信4G手机 华为手机 nova3</a><br/><br/>
              <p><a class="btn btn-default" href="#" role="button">查看更多 &raquo;</a></p><br/>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Apple</h2>
              <a>苹果(Apple) 苹果 iPhone XS Max 64GB 金色 移动联通电信4G全面屏手机 双卡双待</a><br/><br/>
              <a>苹果(Apple) 苹果 iPhone XR 64GB 白色 移动联通电信4G全面屏手机 双卡双待</a><br/><br/>
              <p><a class="btn btn-default" href="#" role="button">查看更多 &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>SEIKO</h2>
              <a>钟表精工(SEIKO)日本原装进口SEIKO 5号机械男表商务休闲全自动手表 SNKN09J1</a><br/><br/>
              <a>精工SEIKO领航鸡尾酒系列商务防水机械男表SSA343J1</a><br/><br/>
              <p><a class="btn btn-default" href="#" role="button">查看更多 &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
          </div><!--/row-->
        </div><!--/.col-xs-12.col-sm-9-->
        <!--分类栏-->
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
          <div class="list-group">
            <a href="#" class="list-group-item active">分类</a>
            <a href="#" class="list-group-item">鞋靴</a>
            <a href="#" class="list-group-item">图书</a>
            <a href="#" class="list-group-item">服饰</a>
            <a href="#" class="list-group-item">手机</a>
            <a href="#" class="list-group-item">数码</a>
            <a href="#" class="list-group-item">家居</a>
            <a href="#" class="list-group-item">食品</a>
            <a href="#" class="list-group-item">家电</a>
            <a href="#" class="list-group-item">洗护</a>
          </div>
        </div><!--/.sidebar-offcanvas-->
      </div><!--/row-->

      <hr>
      <!--分页-->
      <nav aria-label="Page navigation" class="text-center">
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
      <footer>
        <p class="text-center">&copy; Company 2018</p>
      </footer>

    </div><!--/.container-->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="offcanvas.js"></script>
  </body>
</html>
